<template>
  <div>
    <!-- 导航栏 -->
    <NavBar fixed placeholder left-arrow :border="false" @click-left="onClickLeft">
      <template #left>
        <Icon color="#16142D" name="arrow-left" size="20" />
      </template>
      <template #title>
        <div
          style="
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #16142d;
            font-weight: 400;
            background: #f6f7fa;
          "
        >
          养老院列表
        </div>
      </template>
    </NavBar>
    <!-- 搜索框 -->
    <div style="padding-left: 16px;padding-right: 16px; margin-top: 8px; border-radius: 8px;overflow: hidden;height: 40px;z-index: 9999;">
      <Search
        v-model="SearchValue"
        clear-trigger="always"
        placeholder="请输入养老院名称查找"
        input-align="right"
        @update:model-value="SearchValue1"
      >
        <template #label>
          <div style="display: flex; justify-content: center; align-items: center;">
            <img src="../../assets/listIcon/5.4.1.4.png" style="width: 10px; height: 12px" />
            <div class="color03 font15" style="margin-left: 6px">上海</div>
          </div>
        </template>
        <template #left-icon></template>
        <template #right-icon>
          <img src="../../assets/listIcon/5.6.1.1.png" style="width: 15px; height: 15px; vertical-align: text-top;margin-top: 1px;" />
        </template>
      </Search>
    </div>
    <!-- 列表 -->
    <div v-if="PensionList != 0" style="padding-left: 16px; padding-right: 16px">
      <div class="PensionList">
        <div v-for="(item, index) in PensionList" :key="index" class="PensionListContent">
          <div class="display_f">
            <div class="PensionListTitle">
              <div class="font_15">{{ item.title }}</div>
              <img
                v-if="item.minban == 1"
                src="../../assets/listIcon/5.4.1.2.png"
                style="width: 32px; height: 19px; margin-left: 12px"
              />
            </div>
            <img
              v-if="shoucang == 0"
              src="../../assets/listIcon/5.4.1.1.png"
              style="width: 20px; height: 20px"
              @click="shoucang = 1"
            />
            <img
              v-else
              src="../../assets/listIcon/5.6.1.2.png"
              style="width: 16px; height: 15px"
              @click="shoucang = 0"
            />
          </div>
          <div class="display_a" style="margin-top: 15px">
            <img src="../../assets/listIcon/5.4.1.4.png" style="width: 10px; height: 12px; margin-left: 5px" />
            <div class="font_12" style="margin-left: 5px">
              {{ item.site }}
            </div>
          </div>
          <div class="display_a" style="margin-top: 12px">
            <img src="../../assets/listIcon/5.4.1.5.png" class="img10" style="margin-left: 5px" />
            <div class="font_12" style="margin-left: 6px">
              {{ item.time }}
            </div>
          </div>
          <div class="display_f" style="margin-top: 12px" @click="show = true">
            <div class="display_a">
              <img src="../../assets/listIcon/5.4.1.6.png" class="img16" style="margin-left: 2px" />
              <div class="font_12">{{ item.money }}</div>
            </div>
            <img src="../../assets/listIcon/5.4.1.3.png" style="width: 8px; height: 14px" />
          </div>
        </div>
      </div>
    </div>
    <div v-else style="height: 603px; display: flex; align-items: center; justify-content: center">
      <img src="../../assets/listIcon/5.4.2.png" style="height: 223px" />
    </div>

    <div v-if="PensionList != 0" style="padding-bottom: 46px">
      <PensionNotices></PensionNotices>
    </div>
    <div v-else style="padding-bottom: 46px; position: absolute; bottom: 0">
      <PensionNotices></PensionNotices>
    </div>
  </div>
  <Overlay :show="show">
    <div class="wrapper" @click.stop>
      <div class="position_img">
        <img src="../../assets/listIcon/5.7.2.png" />
      </div>
      <div class="wrapper_bg">
        <div class="title_bg">
          <div class="title_bg_text">上海金罗养老院</div>
          <div class="display_a_j">
            <div>
              <div class="title_bg_after">地址&nbsp;:&nbsp;</div>
              <div class="title_bg_after">养老院类型&nbsp;:&nbsp;</div>
              <div class="title_bg_after">成立时间&nbsp;:&nbsp;</div>
              <div class="title_bg_after">床位数&nbsp;:&nbsp;</div>
              <div class="title_bg_after">费用范围&nbsp;:&nbsp;</div>
            </div>
            <div>
              <div class="title_bg_last">上海市宝山区罗东路779号近石太路</div>
              <div class="title_bg_last">综合性养老机构</div>
              <div class="title_bg_last">2003年9月</div>
              <div class="title_bg_last">100张</div>
              <div class="title_bg_last">10000元/年-20000元/年</div>
            </div>
          </div>
        </div>
        <div style="padding-left: 11px; padding-right: 11px">
          <div class="wrapper_content">
            <div class="wrapper_content_father">
              <div class="wrapper_content_after">服务范围&nbsp;:&nbsp;</div>
              <div class="wrapper_content_last">
                起居照顾、卧病老人护理、压疮护理、接送机、家政、陪伴、周边游、按摩、助浴
              </div>
            </div>
            <div class="wrapper_content_father">
              <div class="wrapper_content_after">配套设施&nbsp;:&nbsp;</div>
              <div class="wrapper_content_last">
                【老人房间设施】护理床、呼叫器、储物柜、床头灯、电视、空调、冰箱、电话、独立卫生间、洗衣机、阳台、采暖、书桌<br />
                【休闲娱乐设施】棋牌
              </div>
            </div>
            <div class="wrapper_content_father">
              <div class="wrapper_content_after">服务内容说明&nbsp;:&nbsp;</div>
              <div class="wrapper_content_last">
                星堡致力于将寻求精彩、与时代接轨的活力长者们从家务、琐事和照顾另一半的压力中释放出来。优雅充实的老年生活离不开一个健康的体魄，良好的机体与认知功能以及积极的生活态度。
              </div>
            </div>
            <div class="wrapper_content_father">
              <div class="wrapper_content_after">交通路线&nbsp;:&nbsp;</div>
              <div class="wrapper_content_last">地铁1号线上海马戏城站、7号线大场镇站、923路公交底站直达</div>
            </div>
          </div>
        </div>
        <div class="display_c">
          <img src="../../assets/listIcon/5.4.1.1.png" style="width: 20px; height: 20px" />
          <div style="font-size: 14px; color: #16142d; font-weight: 500; margin-left: 4px">收藏</div>
        </div>
        <div class="wrapper_content_last" style="margin: 0 auto; margin-top: 8px">
          可前去【我的】-【我的收藏】中查看更多收藏
        </div>
      </div>
      <img
        src="../../assets/listIcon/5.7.3.png"
        style="width: 36px; height: 36px; margin: 0 auto; margin-top: 24px; display: block"
        @click="show = false"
      />
    </div>
  </Overlay>
</template>

<script setup>
import { NavBar, Search, Icon, Rate, Overlay } from 'vant'
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
import PensionNotices from './components/PensionNotices.vue'
// onMounted(() => { });
// 导航栏返回按钮
const onClickLeft = () => {
  console.log('点击了返回按钮')
  history.back()
}
const show = ref(false)
// 搜索框绑定数据
const SearchValue = ref('')
const SearchValue1 = (val) => {
  // 写搜索接口
  console.log(val)
}
const onCancel = () => {
  console.log('取消')
}
const shoucang = ref(0)
// 列表数据
const PensionList = ref([
  {
    title: '上海金罗养老院',
    site: '上海市宝山区罗东路779号近石太路',
    time: '成立时间：2003年9月',
    money: '费用：10000-20000 元/年',
  },
  {
    title: '上海金罗养老院',
    minban: 0,
    site: '上海市宝山区罗东路779号近石太路',
    time: '成立时间：2003年9月',
    money: '费用：10000-20000 元/年',
  },
  {
    title: '上海金罗养老院',
    minban: 1,
    site: '上海市宝山区罗东路779号近石太路',
    time: '成立时间：2003年9月',
    money: '费用：10000-20000 元/年',
  },
  {
    title: '上海金罗养老院',
    minban: 0,
    site: '上海市宝山区罗东路779号近石太路',
    time: '成立时间：2003年9月',
    money: '费用：10000-20000 元/年',
  },
  {
    title: '上海金罗养老院',
    minban: 1,
    site: '上海市宝山区罗东路779号近石太路',
    time: '成立时间：2003年9月',
    money: '费用：10000-20000 元/年',
  },
  {
    title: '上海金罗养老院',
    minban: 0,
    site: '上海市宝山区罗东路779号近石太路',
    time: '成立时间：2003年9月',
    money: '费用：10000-20000 元/年',
  },
  {
    title: '上海金罗养老院',
    minban: 0,
    site: '上海市宝山区罗东路779号近石太路',
    time: '成立时间：2003年9月',
    money: '费用：10000-20000 元/年',
  },
])
</script>
<script>
import { defineComponent } from 'vue'
export default defineComponent({})
</script>
<style scoped>
@import url(./style/PensionList.css);
* {
    --van-nav-bar-background: #f6f7fa;
    --van-search-background: #fff;
    --van-search-content-background: #fff;
    --van-search-padding: 0px;
}
</style>
